<template>
  <div id="addMusic" style="width: 100%;padding: 20px">
    <el-form :model="musicArtForm" >
      <p>歌手名</p>
      <input type="text" v-model="musicArtForm.musicArt" class="input-100">
      <p>歌手别称</p>
      <input type="text" v-model="musicArtForm.artNickName" class="input-100">
      <p>英文名</p>
      <input type="text" v-model="musicArtForm.artEnName" class="input-100">
      <p>国籍</p>
      <input type="text" v-model="musicArtForm.artCountry" class="input-100">
      <p>生日</p>
      <input type="text" v-model="musicArtForm.artBirthday" class="input-100">
      <p>现公司</p>
      <input type="text" v-model="musicArtForm.artCompany" class="input-100">
      <p>代表作品</p>
      <input type="text" v-model="musicArtForm.artMainMusic" class="input-100">
      <p>职业</p>
      <input type="text" v-model="musicArtForm.artProfession" class="input-100">
      <p>歌手简介</p>
      <textarea type="text" v-model="musicArtForm.artBasicInfo" class="input-100"/>
    </el-form>
    <button class="button button-color-white" @click="addNewMusicArt">添加</button>
  </div>

</template>

<script>
  export default {
    name: "addMusic",
    data(){
      return{
        musicArtForm:{
          musicArt: '',
          artBasicInfo:'',
          artEnName:'',
          artCountry:'',
          artBirthday:'',
          artCompany:'',
          artMainMusic:'',
          artProfession:'',
          artNickName:'',
        }
      }
    },
    methods:{
      async addNewMusicArt(){
        const {data:res} = await this.$axios.post('v1/addMusicArtInfo',this.musicArtForm)
        if(res.code === 200){
          this.$message.success("添加成功")
        }
      }
    }


  }
</script>

<style lang="less" scoped>
  #addMusic{
    height: calc(100vh - 40px);
    overflow-y: auto;
    p{
      margin-bottom: 5px;
      color: var(--theme-fontMain);
    }
    input{
      margin-bottom: 20px;
      background-color: var(--theme-button);
    }
    button{
      margin-top: 20px;
    }
    #musicImg{
      width: 170px;
      height: 238px;
      background-color: #e9e9e9;
      margin-bottom: 20px;
      display: grid;
      place-items: center;
      color: black;
      border-radius: 6px;
      overflow: hidden;
    }
    textarea{
      border-radius: 6px;
      height: 100px;
      resize: none;
      padding: 5px 10px;
      margin-right: 20px;
      white-space: normal;
    }
  }

</style>


